{% extends "base.html" %}

{% block title %}Edit Group{% endblock %}

{% block javascript %}
{{ forms.media }}
{% endblock %}


{% block content %}

<script type="text/javascript">
	$(document).ready( function() {
		$("#tabs").tabs();
	});
</script>

<form id="MainForm" enctype="multipart/form-data" action="." method="POST">

<div id="tabs">
	<ul class="no_icon">
		<li><a href="#tab1">Group</a></li>
		<li><a href="#tab2">Assignments</a></li>
		<li><a href="#tab3">Theme</a></li>
		<li><a href="#tab4">Members</a></li>
	</ul>
	<div id="tab1">
		{{ forms.GroupUpdateForm.title.label }} {{ forms.GroupUpdateForm.title }}<br/><br/>
		{{ forms.GroupUpdateForm.description.label }}<br/>
		{{ forms.GroupUpdateForm.description }}
		{{ forms.GroupUpdateForm.start_date.label }} {{ forms.GroupUpdateForm.start_date }}<br/><br/>
		{{ forms.GroupUpdateForm.end_date.label }} {{ forms.GroupUpdateForm.end_date }}<br/><br/>
	</div>
	<div id="tab2">
		<h3>Create New Assignment</h3>
		{{ forms.AssignmentAjaxInsertForm.as_template }} {{ forms.AssignmentAjaxInsertForm.errors }}
		<br/>
		<h3>Current Assignments</h3>
		<ul id='AssignmentList' class='no_icon'>
			{% for f in forms.AssignmentInlineUpdateForm %}
			<li>{{ f.as_template }} {{ f.errors }}
			{% endfor %}
		</ul>
	</div>
	<div id="tab3">
		{{ forms.ProfileUpdateForm.as_p }}
	</div>
	<div id="tab4">
		<h3>Add new member</h3>
		{{ forms.MembershipAjaxInsertForm.as_template }}
		<h3>Current Members</h3>
		<ul id='MembershipList' class='no_icon'>
			{% for f in forms.MembershipInlineUpdateForm %}
			<li>{{ f.as_template }} {{ f.errors }}
			{% endfor %}
		</ul>
	</div>
	{{ forms.errors }}
</div>




{{ forms.submit }}

</form>
{% endblock %}

{% block sidebar %}
{% endblock %}